<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="https://cdn.bugbank.xyz/dance/css/dance.css">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
		<title>小圈圈-Love letter from Tao Yuan-陶园</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
		<meta name="keywords" content="小圈圈,小圈圈,图库相册,程序员女朋友的相册是这样的">
		<meta name="description" content="Unique letter, please read it slowly.是的,它和你一样,独一无二">
		<style>
			@font-face{
				font-family: like;
				src: url('./uploads/like.ttf');
			}
			*{
				font-family:like;
			}
			body{
				font-family: like;
				height: 100vh;
				width: 100vw;
				/* background-image: url(./uploads/lobg2.jpg); */
				background-size: 100% 100%;
				background-repeat: no-repeat;
				margin: 0px;
				position: relative;
				animation: all 3s;
				animation-name: bg;
				animation-duration:30s;
				animation-iteration-count: infinite;
			}
			.box{
				position: absolute;
				/* left: 40%; */
				width: 100vw;
				top: 27.7%;
				/* text-align: center; */
			}
			h3{
				font-size: 2rem;
				font-weight: bold;
				text-align: center;
				margin-top: 0px;
			}
			.contents{
				/* background-color: #FF83FA; */
				max-width: 55vw;
				margin: auto;
			}
			.content p{
			        padding: 20px 15px;
			        color: white;
			        text-indent: 20px;
			        font-size: 16px;
			        line-height: 28px;
			        letter-spacing: 1px;   
					text-align: left;
			}
			
			.right{
				text-align: right;
				margin: 0px;
				font-size: 12px;
			}
			h5{
				margin: 0.5rem;
				font-size: 1rem;
			}
			@keyframes bg{
				0%{
					color: #ff557f;
					background-image: url(uploads/lobg.jpg);
				}
				90%{
					background-image: url(uploads/lobg2.jpg);
					color: #000000;
				}
				100%{
					color: #ff557f;
					background-image: url(uploads/lobg.jpg);
				}
			}
		</style>
	</head>
	<body>
		<div class="box">
			<audio loop src="uploads/bgm2.mp3" id="audio" autoplay preload="auto">该浏览器不支持audio属性</audio>
			<h3 class="text-a-hover">你的耳机</h3>
			<div class="contents" id="word">
				
			</div>
		</div>
	</body>
	<script>
	    function start(){
	        let str = '<h5>Collect:Miss TaoYuan </h5>&nbsp;&nbsp;&nbsp;我想做你的耳机，我会发声需要聆听，同样，也可以倾听你的声音;<br>我不大不小，只要你不丢掉，哪里都可以有我的陪伴;<br>我偶尔也能发出悦耳的音质，你不需要去海边，因为我能表述海的声音，当然，我更希望，<br>我和你去到海边，一起欣赏海的声音，登上山顶，听风的呼唤；<br>如果可以，更希望我们一起倾听岁月的歌声...<br><h5 class="right"> From:Mr ZhangYi</h5><p class="right">2020-12-12<em class="flash-a">_</em></p>'
	        let str_ = ''
	        let i = 0
	        let content = document.getElementById('word')
	        let timer = setInterval(()=>{
	            if(str_.length<str.length){
	                str_ += str[i++]
	                content.innerHTML = '<p>'+str_+'_</p>'                        //打印时加光标
	            }else{ 
	                clearInterval(timer)
	                content.innerHTML = '<p>'+str_+'</p>'
	            }
	        },100)
	    }
	    start()
	</script>
</html>
